<template>
	<div id="voice">
		<!-- 按钮 -->
		<div
			ref="footer"
			:class="{'press':speakText == '松开结束'}"
			class="btn"
			@touchstart.stop="speakStart"
			@touchmove.stop="speakMove"
			@touchend.stop="speakEnd">
			{{speakText}}
		</div>
		<!-- 显示录音图标 -->
		<div class="speak" v-if="showVoice">
			<img src="@/assets/img/performance/msgCenter/icon_voice.gif">
			<p>{{speakText=='松开结束'?'正在录音':speakText}}</p>
		</div>
	</div>
</template>
<script>
import {getVoice,setVoice} from '@/utils/chat.js'
export default {
	data() {
		return {
			speakText:"按住说话",
			posStart:0,//初始化起点坐标
			posEnd:0,//初始化终点坐标
			posMove:0,//初始化滑动坐标
			voiceLen:0,  //语音时长
			timer:"", //定时器
			voiceTimer:"", //语音时间
			voiceStatus:true, //true才能提交
			voiceObj:"",  //录音对象
			showVoice:false,
			voicePath:"", //录音完成后的地址（本地）
			toast:"",
		};
	},
	methods: {
		//开始录音
		speakStart:function(event){
			this.voiceStatus = true; //为true才能提交
			this.speakText = "松开结束";
			this.posStart = event.touches[0].pageY;
			this.showVoice = true; //显示悬浮物
			//获取时长
			this.voiceLen = 0;
			this.timer = setInterval(()=>{
				if(this.voiceLen >= 60){
					this.speakEnd(); //结束录音
				}
				else{
					this.voiceLen++;
				}
			},1000)
			//语音输入
			this.voiceObj = plus.audio.getRecorder();
			if(this.voiceObj == null){
				console.log('录音对象为空');
			}
			this.voiceObj.record( {filename:"_doc/audio/tuxiaozhu/"}, (res)=> {
				//true才能上传
				if(this.voiceStatus){
					console.log(res);
					let obj = {
						path:res,
						time:this.voiceLen==0?1:this.voiceLen
					};
					this.$emit("finish",obj);  //传递给父组件
				}
			}, e=>{
				this.$toast('录音失败');
				console.log(e);
			});
		},
		//滑动时
		speakMove:function(event){
			this.posMove = 0;
			this.posMove = event.targetTouches[0].pageY;  //获取滑动实时坐标
			if(this.posStart - this.posMove < this.$refs.footer.clientHeight){
				console.log('松开结束');
				this.speakText = '松开结束';
				this.voiceStatus = true; //为true才能提交
			}
			else{
				console.log('取消发送');
				this.speakText = '取消发送';
				this.voiceStatus = false; //为true才能提交
			}
		},
		//结束录音
		speakEnd:function(event){
			console.log('手指松开...');
			clearInterval(this.timer);
			console.log('时长：' + this.voiceLen);
			//如果录音时间符合规范
			if(this.voiceLen<60){
				console.log('录音符合规范');
				this.posEnd = 0;
				this.posEnd = event.changedTouches[0].pageY; //获取终点坐标
				//发送成功
				if(this.posStart - this.posEnd < this.$refs.footer.clientHeight){
					//提交
					if(this.voiceStatus){
						//结束录音
						this.voiceObj.stop();
						this.showVoice = false; //隐藏悬浮物
						this.showSpeak = false;
						this.voiceNum++;
						this.speakText = '按住说话';
						console.log('提交');
					}
				}
				//取消发送
				else{
					console.log('老子不发了');
					this.voiceObj.stop(); //结束录音
					this.showVoice = false; //隐藏悬浮物
					this.speakText = '按住说话';
				}
			}
			//录音时间不符合规范
			else{
				//结束录音
				this.voiceObj.stop();
				this.showVoice = false; //隐藏悬浮物
				this.showSpeak = false;
				console.log('结束录音');
			}
		},
		//加载中
		loading:function(msg){
			const toast = this.$toast.loading({
				duration: 0,
				mask: false,
				message: msg,
				forbidClick:true
			});
			return toast;
		},
	},
	mounted(){

	}
};
</script>

<style lang="scss" scoped>
	#voice{
		.btn{
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 50px;
			line-height: 50px;
			text-align: center;
			background-color: #fff;
		}
		//按住的状态
		.press{
			background-color: #F5F5F5;
		}
	}

	//显示录音图标
	.speak{
		position: fixed;
		left: 50%;
		bottom: 200px;
		margin-left: -1rem;
		color: #fff;
		width: 2rem;
		background-color: #252525;
		opacity: 0.8;
		text-align: center;
		border-radius: 6px;
		padding: 0.3rem 0;
		img{
			width: 50%;
		}
		p{
			padding-top: 10px;
		}
	}
</style>
